<template>
  <div>
    <!-- 按钮 -->
    <el-button style="margin:10px 10px" type="primary" icon="el-icon-refresh-right" circle
      @click="rangeChange"></el-button>
    <!-- 表格
      data 展示数据 —— 数组类型
    -->
    <el-button @click="handleExport2" style="margin-right: 30px;">导出报表</el-button>
    <el-date-picker v-model="valueData" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels
      range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
    </el-date-picker>
    <!-- <el-date-picker value-format="yyyy-MM" v-model="value" type="month" placeholder="选择月"> -->
    </el-date-picker>
    <el-button style="margin-left: 10px;" icon="el-icon-search" @click="rangeChange"></el-button>
    <el-table id="table" style="width: 100%;" border :data="list">
      <!-- 发起人 -->
      <el-table-column prop="startTime" label="查询时间" align="center">
      </el-table-column>
      <el-table-column prop="rechargeMoney" label="充值金额" align="center">
      </el-table-column>
      <el-table-column prop="totalGold" label="充值金币(含赠送)" align="center">
      </el-table-column>
      <el-table-column prop="unverifiedGold1" label="本月可摊销金币(上个月+充值+任务)" align="center">
      </el-table-column>
      <el-table-column prop="totalMoy" label="本月可摊销金额" align="center">
      </el-table-column>
      <el-table-column prop="rate" label="本月金币摊销率" align="center">
      </el-table-column>
      <!-- <el-table-column  label="本月摊销率" align="center">
        <template slot-scope="{ row, $index }">
          {{toPercent(row.totalMoy*100/row.unverifiedGold)}}
        </template>
      </el-table-column> -->
      <!-- <el-table-column prop="totalUseGold" label="本月已核销金币" align="center">
      </el-table-column> -->
      <el-table-column prop="useGold" label="本月已核销金币" align="center">
      </el-table-column>
      <el-table-column prop="useGoldMoy" label="本月已核销金额" align="center">
      </el-table-column>
      <el-table-column prop="unverifiedMoy" label="累计未核销金额" align="center">
      </el-table-column>
      <el-table-column prop="unverifiedGold22" label="本月累计未核销金币" align="center">
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- <el-pagination style="margin-top:20px;textAlign:center" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination> -->
  </div>
</template>

<script>
  import {
    exportToExcel
  } from '@/utils/Export2Excel'
  export default {
    name: 'goldTable',
    data() {
      return {
        value: '',
        valueData: [],
        //页码
        pageNumber: 1,
        //每页数量
        pageSize: 10,
        //总条数
        total: 0,
        //列表数据
        list: [],
        aa: false,
      }
    },
    mounted() {
      // this.getPageAccountDetailList()
    },
    methods: {
      toPercent(point) {
        var str = Number(point * 100).toFixed(2);
        str += "%";
        return str;
      },
      // 获取某年某月的最后一天
      getLastDayOfMonth(year, month) {
        var date = new Date(year, month - 1, '01');
        //设置日期
        date.setDate(1);
        //设置月份
        date.setMonth(date.getMonth() + 1);
        //获取本月的最后一天
        var cdate = new Date(date.getTime() - 1000 * 60 * 60 * 24);
        //返回结果
        return cdate.getDate();
      },
      rangeChange() {
        this.value = this.valueData[0].split('-')[0] + '-' + this.valueData[0].split('-')[1]
        console.log('时间', this.value)
        if (!this.value) {
          return;
        }
        this.aa = true
        this.list = []
        console.log('时间', this.value)
        // console.log(this.tableData)
        // this.tableData[0].sDate = this.valueData[0]
        // this.tableData[0].eDate = this.valueData[1]
        var mo = Number(this.value.split('-')[1] - 1)
        var ye = this.value.split('-')[0]
        if (mo == 0) {
          mo = 12
          ye = ye - 1
        }
        // // 上个月
        // this.valueData[0] = ye + '-' + mo + '-' + '01'
        // this.valueData[1] = ye + '-' + mo + '-' + this
        //   .getLastDayOfMonth(
        //     ye, mo)
        // 上个月
        this.valueData[3] = ye + '-' + mo
        // this.valueData[1] = ye + '-' + mo


        // // 本月
        // this.valueData[0] = this.value + '-' + '01'
        // this.valueData[1] = this.value + '-' + this.getLastDayOfMonth(this.value.split('-')[0], this.value.split('-')[
        //   1])

        // console.log(this.value.split('-'))
        // if (!this.valueData) {
        //   this.valueData = []
        // }
        console.log('时间范围', this.valueData)
        // this.getPageAccountDetailList()
        if (this.checkMonth(this.valueData[0], this.valueData[1]) == 1) {
          this.getGoldTable()
        } else {
          this.$message({
            message: '日期选择只能同一个月内',
            type: 'error',
            duration: 5 * 1000
          })
        }

      },
      checkMonth(dt1, dt2) {
        dt1 = new Date(dt1.replace(/-/g, "/"));
        dt2 = new Date(dt2.replace(/-/g, "/"));
        if (dt1.getFullYear() == dt2.getFullYear() && dt1.getMonth() == dt2.getMonth()) {
          console.log('同')
          return 1
        } else {
          console.log('不同')
          return 0
        }
      },
      handleExport2() {
        let auditResult = prompt('报表名字：');
        if (auditResult != null && auditResult != "") {
          exportToExcel('#table', auditResult);
        }
      },
      async getGoldTable() {
        let res = await this.$API.running.getGoldTable({
          month: this.valueData[3]
        })
        console.log('金币参考', res)
        if (res.code == 200) {
          for (var i = 0; i < res.data.length; i++) {
            if (res.data[i].type == 1) {
              var dataList = res.data[i]
            }
          }
          console.log(dataList)
          // 本月
          // this.valueData[0] = this.value + '-' + '01'
          // this.valueData[1] = this.value + '-' + this.getLastDayOfMonth(this.value.split('-')[0], this.value.split(
          //   '-')[
          //   1])
          this.getPageAccountDetailList2(dataList)
        }

      },
      // async getPageAccountDetailList() {
      //   let res = await this.$API.running.goldTable({
      //     endTime: this.valueData[1],
      //     startTime: this.valueData[0]
      //   })
      //   console.log('财务统计表-金币明细表', res)
      //   if (!res.data) {
      //     if (this.aa) {
      //       // 本月
      //       this.valueData[0] = this.value + '-' + '01'
      //       this.valueData[1] = this.value + '-' + this.getLastDayOfMonth(this.value.split('-')[0], this.value.split(
      //         '-')[
      //         1])
      //       this.getPageAccountDetailList2()
      //     }
      //   } else {
      //     // this.total = res.data.sumLine;
      //     res.data.startTime = this.valueData[0]
      //     console.log(res.data)
      //     this.list.push(res.data);
      //     // let event = this.list
      //     // for (var j in event) {
      //     //   this.list.push(
      //     //     Object.assign(event[j], {
      //     //       startTime: this.valueData[0],
      //     //     })
      //     //   );
      //     // }
      //     console.log('金币明细表', this.list)
      //     if (this.aa) {
      //       // 本月
      //       this.valueData[0] = this.value + '-' + '01'
      //       this.valueData[1] = this.value + '-' + this.getLastDayOfMonth(this.value.split('-')[0], this.value.split(
      //         '-')[
      //         1])
      //       this.getPageAccountDetailList2()
      //     }
      //   }
      // },
      addDate(strDate) {
        let dateFormat = new Date(strDate);
        dateFormat = dateFormat.setDate(dateFormat.getDate() + 1);
        dateFormat = new Date(dateFormat);
        let y = dateFormat.getFullYear()
        let m = (dateFormat.getMonth() + 1).toString().padStart(2, '0')
        let d = dateFormat.getDate().toString().padStart(2, '0')
        return `${y}-${m}-${d}`
      },
      async getPageAccountDetailList2(lastMonth) {
        let res = await this.$API.running.goldTable({
          endTime: this.addDate(this.valueData[1]),
          startTime: this.valueData[0]
        })
        console.log('财务统计表-金币明细表2', res)
        res.data.startTime = this.value
        // res.data.unverifiedGold = lastMonth.totalUnuseGold + res.data.unverifiedGold
        res.data.unverifiedGold1 = lastMonth.totalUnuseGold + res.data.unverifiedGold + res.data.useGold

       if (this.valueData[0] == '2023-12-01' && this.valueData[1] == '2023-12-31') {
         res.data.useGold = res.data.useGold + 10000
         res.data.unverifiedGold22 = res.data.unverifiedGold1 - res.data.useGold
       } else {
         res.data.unverifiedGold22 = res.data.unverifiedGold1 - res.data.useGold
       }
        res.data.totalMoy = res.data.rechargeMoney + lastMonth.totalUnuseMoney
        console.log('摊销率', res.data.totalMoy * 100 / res.data.unverifiedGold1)
        res.data.rate = this.toPercent((res.data.totalMoy * 100 / res.data.unverifiedGold1).toFixed(4))
        res.data.useGoldMoy = ((res.data.useGold / 100) * (res.data.totalMoy * 100 / res.data.unverifiedGold1))
          .toFixed(2)
        res.data.unverifiedMoy = (res.data.totalMoy - res.data.useGoldMoy).toFixed(2)



        this.list.push(res.data);



        // console.log(res.data.unverifiedGold22)
      },
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.pageSize = val
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.pageNumber = val
      },
      // filterTag(value, row) {
      //   console.log(value, row)
      //   return row.operateType == value;
      // },
    }
  }
</script>

<style>

</style>
